<template>
    <div class="user-info">
        <div class="head">
            <slot name="head">
                <img src="~assets/img/profile/avatar.svg" alt="">
            </slot>
        </div>
        <div class="login-info">
            <div class="name">
                <slot name="name">登录/注册</slot>
            </div>
            <div class="phone">
                <img src="~assets/img/profile/phone.svg" alt="">
                <slot name="number">暂无绑定手机号</slot>
            </div>
            <span class="icon"></span>
        </div>
    </div>
</template>



<style scoped>
    .user-info{
        
        display: flex;
        align-items: center;
        padding: 20px;
        background: var(--color-tint);
        color: #fff;
    }

    .head img{
        width: 70px;
        height: 70px;
    }

    .login-info{
        position: relative;
        flex: 1;
    }

    .login-info .phone{
        font-size: 14px;
    }
    
    .login-info .phone img{
        width: 20px;
        height: 20px;
        vertical-align: middle;
    }

    .login-info .name{
        margin-left: 8px;
        font-size: 17px;
    }

    .login-info span.icon{
        position: absolute;
        right: 0;
        top: 10px;
        width: 9px;
        height: 9px;
        border-top: 2px solid #fff;
        border-right: 2px solid #fff;
        transform: rotate(45deg);
    }
</style>